<template>
  <div class="component-container">
    <div class="component-body-wrapper">
      <div class="component-body">
        <section>
          <div class="component-title">
            <span>
              <span class="title-breadcrumb">所有产品</span>
            </span>
          </div>
          <div class="statistics">
            <div class="statistics-item">
              <div>产品类型</div>
              <div class="item-count">{{statisticsData.productAmount}}</div>
            </div>
            <div class="statistics-item">
              <div>在线设备总数</div>
              <div class="item-count" v-loading="loadingOnlineSwitchAmount">{{statisticsData.onlineSwitchAmount}}</div>
            </div>
          </div>
        </section>
        <section>
          <div class="card-row">
            <div class="card-col">
              <div class="card-panel">
                <div class="card-title">
                  <span>近{{limit}}天新增设备</span>
                  <span class="go-detail" @click="$router.push('/bms-newSwitch')">查看详情</span>
                </div>
                <div ref="chart1" class="charts" v-loading="loadingData"></div>
              </div>
            </div>
            <div class="card-col">
              <div class="card-panel">
                <div class="card-title">
                  <span>近{{limit}}天活跃设备</span>
                  <span class="go-detail" @click="$router.push('/bms-userActive')">查看详情</span>
                </div>
                <div ref="chart2" class="charts" v-loading="loadingData"></div>
              </div>
            </div>
          </div>
        </section>
        <section>
          <div class="component-title">
            <span class="title-breadcrumb">用户概览</span>
          </div>
          <div class="card-row">
            <div class="card-col">
              <div class="card-panel">
                <div class="card-title">
                  <span>近{{limit}}天新增用户</span>
                  <span class="go-detail" @click="$router.push('/bms-newUser')">查看详情</span>
                </div>
                <div ref="chart3" class="charts" v-loading="loadingData"></div>
              </div>
            </div>
            <div class="card-col">
              <div class="card-panel">
                <div class="card-title">
                  <span>近{{limit}}天活跃用户</span>
                  <span class="go-detail" @click="$router.push('/bms-userActive')">查看详情</span>
                </div>
                <div ref="chart4" class="charts" v-loading="loadingData"></div>
              </div>
            </div>
          </div>
        </section>
      </div>
      <div></div>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: "",
  data() {
    return {
      limit: 7,
      statisticsList: [],
      currentProduct: "",
      statisticsData: {
        productAmount: 0,
        onlineSwitchAmount: 0,
      },
      chart1: null,
      chart2: null,
      chart3: null,
      chart4: null,
      productList: [],
      loadingOnlineSwitchAmount: true,
      loadingData: true,
    };
  },
  components: {},
  mounted() {
    this.getProductList();
    this.getOnlineSwitchAmount();
    this.getStatistics();
  },
  methods: {
    //获取产品列表并获取产品总数
    async getProductList() {
      if(window.sessionStorage.getItem("productList")) return this.statisticsData.productAmount = JSON.parse(window.sessionStorage.getItem("productList")).length;
      let { data: res } = await this.$http.post("bms/product/list?pageSize=99&pageNum=1");
      if (res.resultCode !== "000") return this.$message.error(res.resultMessage);
      this.productList = res.data
      this.statisticsData.productAmount = this.productList.length;
      window.sessionStorage.setItem('productList', JSON.stringify(res.data))
    },
    //获取在线设备总数
    async getOnlineSwitchAmount() {
      this.loadingOnlineSwitchAmount = true;
      let { data: res } = await this.$http.post("bms/switch/online", {productKey: ''});
      if (res.resultCode !== "000") return this.$message.error(res.resultMessage);
      this.loadingOnlineSwitchAmount = false;
      this.statisticsData.onlineSwitchAmount = res.data;
    },
    //获取每日统计数据
    async getStatistics() {
      this.loadingData = true;
      let { data: res } = await this.$http.post(
        "bms/statistics?limit=" + this.limit
      );
      if (res.resultCode !== "000") return this.$message.error(res.resultMessage);
      this.loadingData = false;
      this.statisticsList = res.data.reverse();
      this.getEchartData();
    },
    getEchartData() {
      this.chart1 = this.$refs.chart1;
      this.drawChart(this.chart1, this.statisticsList.map((item) => item.switchCreate));

      this.chart2 = this.$refs.chart2;
      this.drawChart(this.chart2, this.statisticsList.map((item) => item.switchActive));

      this.chart3 = this.$refs.chart3;
      this.drawChart(this.chart3, this.statisticsList.map((item) => item.userCreate));

      this.chart4 = this.$refs.chart4;
      this.drawChart(this.chart4, this.statisticsList.map((item) => item.userActive));
    },
    drawChart(chart, data) {
      if (chart) {
        const myChart = echarts.init(chart);
        const option = {
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: this.statisticsList.map((item) =>
              item.day.substring(item.day.length - 5)
            ),
          },
          yAxis: {
            type: "value",
          },
          series: [
            {
              data: data,
              type: "line",
              areaStyle: {
                color: "#B3E1FE",
              },
              label: {
                normal: {
                  show: true,
                  position: 'top'
                }
              },
            },
          ],
          itemStyle: {
            color: "#067BEA", //改变折线点的颜色
            lineStyle: {
              color: "#067BEA", //改变折线颜色
            },
          },
          tooltip: {
            show: true
          },
        };
        myChart.setOption(option);
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      }
      this.$on("hook:destroyed", () => {
        window.removeEventListener("resize", function () {
          myChart.resize();
        });
      });
    },
  },
};
</script>

<style lang='scss' scoped>
.component-container {
  min-width: 1000px;
  padding-bottom: 40px;
  .component-title-wrapper {
    font-size: 12px;
    color: rgb(102, 102, 102);
    height: 64px;
    line-height: 64px;
    padding: 0 16px;
    .component-title {
      border-bottom: 1px solid #ecedee;
      .title-breadcrumb {
        font-weight: bolder;
        font-size: 16px;
        padding: 0 10px;
        font-weight: bolder;
        display: inline-block;
        position: relative;
        &::before {
          position: absolute;
          content: "";
          left: 0;
          top: 50%;
          width: 4px;
          height: 20px;
          margin-top: -10px;
          background: #0070cc;
        }
      }
    }
  }
  .component-body-wrapper {
    .component-body {
      padding: 0 16px;
      .component-title {
        font-size: 12px;
        color: rgb(102, 102, 102);
        padding: 20px 0;
        position: relative;
        .title-breadcrumb {
          font-weight: bolder;
          font-size: 16px;
          padding: 0 10px;
          font-weight: bolder;
          display: inline-block;
          position: relative;
          &::before {
            position: absolute;
            content: "";
            left: 0;
            top: 50%;
            width: 4px;
            height: 20px;
            margin-top: -10px;
            background: #bac8cf;
          }
        }
        .condition-right {
          position: absolute;
          right: 0;
          top: 10px;
        }
      }
      .statistics {
        border: 1px solid #ecedee;
        margin-bottom: 20px;
        display: flex;
        justify-content: space-between;
        .statistics-item {
          padding: 20px 28px;
          border-right: 1px solid #ecedee;
          flex: 1;
          &:last-child {
            border: none;
          }
          .item-count {
            font-weight: 400;
            font-size: 28px;
            line-height: 40px;
            color: #333333;
          }
        }
      }
      .card-row {
        display: flex;
        margin-bottom: 20px;
        margin: 0 -8px;
        .card-col {
          width: 50%;
          padding: 0 8px;
          .card-panel {
            padding: 20px;
            border: 1px solid #ecedee;
            .card-title {
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-bottom: 20px;
              font-weight: 700;
              color: #373d41;
              .go-detail {
                color: #0070cc;
                cursor: pointer;
              }
            }
            .charts {
              width: 430px;
              height: 300px;
              margin: 0 auto;
            }
          }
        }
      }
    }
  }
}
</style>